<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>

<script type="text/javascript">


	//加载初始化
	$(function() {
		
		//绑定回车事件
		$(':input').bind('keyup', function(event) {
			if (event.keyCode == "13") {
				$('#modify_password').submit();
			}
		});
		
		//表单验证使用属性validate进行验证
		$.metadata.setType("attr","validate");
		$("#modify_password").validate({
			rules: {
				oldPassword: {
					required: true,
					minlength:6,
					maxlength: 20
				},
				password:{
					required: true,
					minlength:6,
					maxlength:20,
					remote:'checkModifyPassword.ajax?memberId='+$("#memberId").html()
				},
				confirm_password:{
					equalTo:'#password'
				},
				email:{
					required: true,
					email:true,
					remote: 'checkModifyEmail.htm?memberId='+$("#memberId").html()
				}
			},
			messages: {
				oldPassword : {
					required: "原始密码不能为空",
					maxlength: "密码长度6～20个字符"
				},
				password:{
					required: "密码不能为空",
					remote:"您输入的和户主是同一把钥匙"
				},
				confirm_password:{
					equalTo:'密码必须相同'
				},
				email:{
					required: "Email不能为空",
					email:"请输入正确的email格式",
					remote: "Email已存在"
				}
			},
			submitHandler: function() {
				$.post("saveSetAccount.htm", {
					memberId:$("#memberId").html(),
					email:$("#email").val(),
					oldPassword:$("#oldPassword").val(),
					password:$("#password").val()
				},function(data){
					if(data=="oldPasswordError"){
						$("#errorNotice").html("原钥匙不正确");
					}else if(data=='success'){
						$("#oldPassword").val("");
						$("#password").val("");
						$("#confirm_password").val("");
						showSuccess();
					}
				});
			}
		});

	});
	function errorNotice(){
		$("#errorNotice").html('');
	}
	//根据下拉框选择钥匙
	function sameKey(){
		var key = $("#isSameKey").val();
		if(key=="same"){
			$("#removeOldPassword").remove();
			$("#removePassword").remove();
			$("#removeConfirm_password").remove();
		}else{
			$("#setAccount").append($("#key_not_Same").html());
		}
	}
	
	//验证原始密码是否正确
	function validateOldPassword(){
		$.post("checkOldPassword.htm",{
			memberId:$("#memberId").html(),
			oldPassword:$("#oldPassword").val()
		},function(data){
			if(data=="oldPasswordError"){
				$("#errorNotice").html("原钥匙不正确");
			}
		});
	}
</script>

<div class="success" id="base_info_tip_success"
	style="display: none; margin-left: 32px;">
	<img alt="修改成功" src="<%=basePath%>images/home_images/ico29.png">密码修改成功
</div>
<form action="" id="modify_password">
	<div class="h_PI">
		<table width="0" border="0" id="setAccount">
			<tr>
				<td class="PI_text">登录邮箱：</td>
				<td><input type="text" id="email" value="${member.email }" name="email"/>
				</td>
			</tr>
			<c:if test="${member.isHost==true }">
				<tr>
					<td class="PI_text">原钥匙：</td>
					<td><input type="password" id="oldPassword" onblur="validateOldPassword()" name="oldPassword" onfocus="errorNotice()"/>
						<div id="errorNotice" style="color: red; display: inline;"></div>
					</td>
				</tr>
				<tr>
					<td class="PI_text">新钥匙：</td>
					<td><input type="password" id="password" name="password"/>
					</td>
				</tr>
				<tr>
					<td class="PI_text">重复钥匙：</td>
					<td><input type="password" id="confirm_password" name="confirm_password"/>
					</td>
				</tr>
			</c:if>
			<c:if test="${member.isHost==false }">
				<c:if test="${member.password==hostPwd }">
					<tr>
						<td class="PI_text">钥匙类型：</td>
						<td id="isHostKey">
							<select id="isSameKey" onchange="sameKey()">
								<option value="same">和户主使用同一把钥匙</option>
								<option value="notSame">自己创建钥匙</option>
							</select>
						</td>
					</tr>
				</c:if>
				<c:if test="${member.password!=hostPwd }">
					<tr>
						<td class="PI_text">钥匙类型：</td>
						<td id="isHostKey">
							<select id="isSameKey" onchange="sameKey()">
								<option value="same">和户主使用同一把钥匙</option>
								<option value="notSame" selected="selected">自己创建钥匙</option>
							</select>
						</td>
					</tr>
					<tr id="removeOldPassword">
						<td class="PI_text">原钥匙：</td>
						<td><input type="password" onblur="validateOldPassword()" id="oldPassword" name="oldPassword" onfocus="errorNotice()"/>
							<div id="errorNotice" style="color: red; display: inline;"></div>
						</td>
					</tr>
					<tr id="removePassword">
						<td class="PI_text">新钥匙：</td>
						<td><input type="password" id="password" name="password"/> </td>
					</tr>
					<tr id="removeConfirm_password">
						<td class="PI_text">重复钥匙：</td>
						<td><input type="password" id="confirm_password" name="confirm_password" /> </td>
					</tr>
				</c:if>
			</c:if>
		</table>
	</div>
	<table>
		<tr>
			<td width="135"></td>
			<td width="524">
				<div class="h_button w75 mt15">
					<strong id="delButton"
						onclick="javascript:$('#modify_password').submit();">保存设置</strong>
				</div>
			</td>
		</tr>
	</table>
</form>
<table id="key_not_Same" style="display: none;">
	<tr id="removeOldPassword">
		<td class="PI_text">原钥匙：</td>
		<td><input type="password" id="oldPassword" onblur="validateOldPassword()" name="oldPassword" onfocus="errorNotice()"/>
			<div id="errorNotice" style="color: red; display: inline;"></div>
		</td>
	</tr>
	<tr id="removePassword">
		<td class="PI_text">新钥匙：</td>
		<td><input type="password" id="password" name="password"/> </td>
	</tr>
	<tr id="removeConfirm_password">
		<td class="PI_text">重复钥匙：</td>
		<td><input type="password" id="confirm_password" name="confirm_password" /> </td>
	</tr>
</table>
